<!--
*  2021-03-15
*  历史环节数据
-->
<template>
  <div id="app" class="historical-list">
    <!-- 头部导航 -->
    <van-nav-bar
      left-arrow
      :title="title"
      left-text="返回"
      @click-left="onClickBack"
    >
    </van-nav-bar>
    <!-- 确认信息 -->
    <better-scroll
      class="public-scroll"
      :data="tableData.items"
      :totalPage="totalPage"
    >
      <van-cell-group>
        <van-cell title="操作人" value="操作内容"></van-cell>
        <van-cell :title="tableData.operatorName" class="historical-list__cell">
          <template slot="default">
            <ul>
              <li v-for="(d, key) in tableData.items" :key="key">
                <span v-html="d.label"></span>
                <span v-html="d.originalValue"></span>
                <span v-if="d.value == true">已确定</span>
                <span v-else v-html="d.value"></span>
              </li>
            </ul>
          </template>
        </van-cell>
      </van-cell-group>
    </better-scroll>
  </div>
</template>

<script>
import { getGreyClothList } from "@/api/warping";
export default {
  name: "HistoricalList",
  props: {
    id: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tableData: {},
      totalPage: 1,
    };
  },
  watch: {
    id() {
      if (this.id) {
        this.onGetGreyClothList();
      }
    },
  },
  mounted() {
    if (this.id) {
      this.onGetGreyClothList();
    }
  },
  methods: {
    // 关闭popup
    onClickBack() {
      this.$emit("hidePopup");
    },
    // 环节数据
    onGetGreyClothList() {
      this.tableData = ""
      getGreyClothList(
        {
          stepId: this.id,
        },
        (res) => {
          this.tableData = res;
        }
      );
    },
  },
};
</script>

<style lang="scss">
.historical-list {
  .van-cell {
    &.historical-list__cell {
      .van-cell__title {
        flex: 0 0 20%;
      }
      .van-cell__value {
        flex: 0 0 80% !important;
        li {
          display: flex;
          justify-content: flex-end;
          border-bottom: 1px solid #ddd;
          line-height: 30px;
          span {
            display: flex;
            width: 150px;
            justify-content: flex-end;
            &:first-child {
              flex: 1;
            }
          }
        }
      }
    }
  }
}
</style>
